<template>
    <div>
        <div style="margin: 15px 0">
            <el-button type="primary" @click="dialogVisible = true">添加专家</el-button>
            <el-button v-if="!stateShow" type="warning" @click="$emit('back')">返 回</el-button>
        </div>
        <!-- 专家组管理 -->
        <el-table :data="haveSpecialistList" border style="width: 90%; font-size: 15px;">
            <el-table-column prop="oprname" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="education" label="学历"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="major" label="专业"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDel(scope.row)">删除 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹层 -->
        <el-dialog
            title="添加专家"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @close="closeFn"
            width="40%"
        >
            <!-- <el-table
                :data='addSpecialistList'
                border
                style='width: 100%; font-size: 15px;'>
                <el-table-column prop='name' label='姓名' min-width='80'></el-table-column>
                <el-table-column prop='sex' label='性别' min-width='50'></el-table-column>
                <el-table-column prop='education' label='学历' min-width='60'></el-table-column>
                <el-table-column prop='phone' label='电话' min-width='120'></el-table-column>
                <el-table-column prop='major' label='专业' min-width='140'></el-table-column>
                <el-table-column label='操作' min-width='80'>
                    <template slot-scope='scope'>
                        <el-button type='primary' icon='el-icon-plus' size='mini' @click='addSpecialist(scope.row)'>添加
                        </el-button>
                    </template>
                </el-table-column>
            </el-table> -->
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="姓名" prop="oprname">
                    <el-input v-model="form.oprname" style="width: 70%"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.sex" style="width: 70%"></el-input>
                </el-form-item>
                <el-form-item label="学历">
                    <el-input v-model="form.education" style="width: 70%"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" style="width: 70%"></el-input>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="form.major" style="width: 70%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getSpeciaListAPI, addSpecialAPI, delUserAPI } from '@/api/backStage.js';
import { mapState } from 'vuex';
export default {
    name: 'specialist',
    props: {
        stateShow: {
            type: Boolean,
            default: false
        }
        // ZJrow: {
        //     type: Object,
        //     default: false
        // }
    },
    data() {
        return {
            dialogVisible: false, // 显示弹层
            addSpecialistList: [],
            form: {
                oprname: '', // 姓名
                sex: '', // 性别
                education: '', // 学历
                phone: '', // 电话
                major: '' // 专业
            },
            rules: {
                oprname: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
            },
            haveSpecialistList: [],
            xmbm: null
        };
    },
    computed: {
        // ...mapState(['applyFor'])
        // ...mapState({
        //     basicJbxx: (state) => {
        //         return state.applyFor.basicData.JBXX;
        //     }
        // })
    },
    mounted() {
        this.getSpeciaListData();
    },

    methods: {
        // 获取专家组列表
        async getSpeciaListData() {
            const res = await getSpeciaListAPI({
                token: this.$store.state.user.token,
                xmid: localStorage.getItem('changeXmid')
            });
            if (res.code == 'succ') {
                this.haveSpecialistList = res.result;
                this.$message.success(res.message);
            } else {
                // this.$message.error(res.message);
            }
        },
        // 提交
        onSubmit() {
            this.$refs.form.validate(value => {
                if (value) {
                    console.log(111);
                    this.handleAdd();
                    this.dialogVisible = false;
                }
            });
        },
        async handleAdd() {
            const obj = {
                oprid: localStorage.getItem('changeXmid'),
                oprname: this.form.oprname
            };
            const res = await addSpecialAPI({
                token: this.$store.state.user.token,
                xmid: localStorage.getItem('changeXmid'),
                Params: obj
            });
            // 调用接口
            this.$message.success(res.message); // 提示信息
            // this.haveSpecialistList.push(obj)
            this.getSpeciaListData();
            // this.$message.error(err.message)
        },
        // 添加专家
        addSpecialist(row) {
            // let index = this.addSpecialistList.findIndex((item) => item.id === row.id);
            // let checkedSpecialistList = this.addSpecialistList.splice(index, 1);
            // this.haveSpecialistList.unshift(checkedSpecialistList[0]);
        },
        // 删除专家
        async handleDel(row) {
            const res = await delUserAPI({
                token: this.$store.state.user.token,
                xmid: this.row.xmid,
                zjbm: row.oprid
            });
            if (res.code == 'succ') {
                this.getSpeciaListData();
                this.$message.success(res.message);
            } else {
                this.$message.error(res.message);
            }
            // 3.重新渲染数据

            // 4. 提示信息
        },
        // 关闭弹窗
        closeFn() {
            this.form = {
                name: '', // 姓名
                sex: '', // 性别
                education: '', // 学历
                phone: '', // 电话
                major: '' // 专业
            };
            // this.$refs.form.resetFields()
        }
    }
};
</script>

<style scoped></style>
